import React, { memo } from "react";
import { IZLConfig } from "./schema";
import logo from "@/assets/cardLabel.png";
import styles from "./index.less";

interface IProps extends IZLConfig {
  isTpl?: boolean;
}

const Coupons = memo((props: IProps) => {
  const {
    title,
    desc,
    link,
    frontColor,
    titColor,
    round,
    imgUrl,
    bgColor,
    isTpl
  } = props;
  const toLink = () => {
    if (link && window.location.href.indexOf("editor") < 0) {
      window.location.href = link;
    }
  };
  return isTpl ? (
    <div>
      <img style={{ width: "100%" }} src={logo} alt=""></img>
    </div>
  ) : (
    <div
      style={{
        maxWidth: "calc(100% - 8px)",
        borderRadius: round + "px",
        margin: "4px auto",
        overflow: "hidden",
        boxShadow: "0 0 6px rgba(0,0,0, .1)"
      }}
    >
      <div
        className={styles.topArea}
        style={{
          backgroundImage: `linear-gradient(45deg, ${frontColor}, ${bgColor})`
        }}
        onClick={toLink}
      >
        <div className={styles.leftBox}>
          <img src={imgUrl && imgUrl[0].url} alt="" />
        </div>
        {title && (
          <div className={styles.rightBox}>
            <div className={styles.title} style={{ color: titColor }}>
              {title}
            </div>
            <div className={styles.desc}>{desc}</div>
          </div>
        )}
      </div>
    </div>
  );
});

export default Coupons;
